<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#00aaff" status-bar left-icon="left" title="交易明细" @clickLeft="back"/>
		<uni-card isFull :title="account_info.account_name || ''" thumbnail="/static/images/bank_card.png" :extra="account_info.account_no || ''" :border="false">
			<view>{{`收入 ：¥ ${count.getCount.toFixed(2)}`}}</view>
			<view>{{`支出 ：¥ ${count.payCount.toFixed(2)}`}}</view>
			<view>{{`手续费 ：¥ ${count.feeCount.toFixed(2)}`}}</view>
		</uni-card>
		<view class="example-body">
			<uni-list-item
				:border="false"
				showExtraIcon 
				showArrow 
				clickable 
				title="查询日期"
				:extraIcon="{color: '#bebebe',size: '22',type: 'calendar'}" 
				:rightText="dateFormat" 
				@click="showCalendar = true"
			/>
			<u-calendar 
				mode="range"
				safeAreaInsetBottom 
				closeOnClickOverlay 
				:show="showCalendar" 
				:monthNum="13"
				:minDate="calendarRange.min"
				:maxDate="calendarRange.max"
				:defaultDate="calendarRange.defaultDate"
				@confirm="handleChange"
				@close="showCalendar = false"
			></u-calendar>
		</view>
		<view class="body">
			<uni-list>
				<uni-list-item 
					showArrow
					v-for="(item, index) in list" 
					:key="index" 
					:title="`No.${item.id} - ${getTransTypeDict(item.trans_type)}`" 
					:note="`手续费 ：¥ ${item.trans_fee} ---- 交易金额：¥ ${item.total_amount}`" 
					:rightText="item.trade_time"
					:to="`/pages/trade/detail?serial_date=${item.trade_time}&original_serialno=${item.original_serialno}&account_no=${account_info.account_no}`"
				/>
			</uni-list>
			<uni-load-more :status="hasMore"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCalendar: false,
				hasMore: 'more',
				account_info: "",
				date: '',
				pageSize: 20,
				pageNo: 0,
				list: [],
				count: {
					payCount: 0,
					getCount: 0,
					feeCount: 0
				},
				calendarRange: {
					min: "",
					max: "",
					defaultDate: []
				}
			}
		},
		
		created() {
			this.calendarRange = {
				min: this.$moment().subtract(1, 'years').format("YYYY-MM-DD"),
				max: this.$moment().format("YYYY-MM-DD"),
				defaultDate: [
					this.$moment().subtract(30, 'days').format("YYYY-MM-DD"),
					this.$moment().format("YYYY-MM-DD")
				]
			}
		},
		
		onLoad() {
			let uid = uni.getStorageSync('uid');
			
			if(!uid || uid == "") {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.getBankAccountInfo(uid)
			}
			
			this.date = [
				this.$moment().subtract(30, 'days').format("YYYY-MM-DD"),
				this.$moment().format("YYYY-MM-DD")
			]
			
		},
		
		onReachBottom() {
			this.hasMore == 'more' && this.getTradeList()
		},
		
		computed: {
			dateFormat() {
				return this.date[0] + ' - ' + this.date[this.date.length - 1]
			}
		},
		
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			
			getBankAccountInfo(uid) {
				uni.request({
					url: '/account/getBankAccountInfo',
					data: {
						uid
					},
					success: (res) => {
						if(res.data.success) {
							this.account_info = res.data.data
							this.pageNo = 0;
							this.pageSize = 20;
							this.getTradeList();
							this.getTradeListCount();
						} else {
							this.hasMore = 'nomore'
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					}
				})
			},
			
			getTradeListCount() {
				uni.showLoading({
					title:'查询中...'
				})
				let data = {
					account_no: this.account_info.account_no,
					start_date: this.date[0],
					end_date: this.date[1]
				}
				
				uni.request({
					url: '/trade/getTradeListCount',
					data,
					success: (res) => {
						if(res.data.success) {
							this.count = res.data.data
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			
			getTradeList() {
				let data = {
					account_no: this.account_info.account_no,
					start_date: this.date[0],
					end_date: this.date[1],
					page: this.pageNo * this.pageSize,
					rows: this.pageSize
				}
				this.hasMore = 'loading'
				
				uni.request({
					url: '/trade/getTradeList',
					data,
					success: (res) => {
						if(res.data.success) {
							let detail_list = res.data.data.detail_list
							let data = [];
							if(this.pageNo == 0) {
								data = detail_list
							} else {
								data = this.list.concat(detail_list)
							}
							
							if(detail_list.length < this.pageSize) {
								this.hasMore = 'noMore'
							} else {
								this.hasMore = 'more'
								this.pageNo +=  1//(this.pageNo == 0 ? 1 : this.pageNo) * this.pageSize
							}
							
							this.list = data
						} else {
							this.hasMore = 'noMore'
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					}
				})
			},
			
			getTransTypeDict(trans_type) {
				let trade_type_dict = ['其他','开户','修改','销户','存款','取款','转入','转出','撤销'];
				return trade_type_dict[trans_type] || '其他'
			},
			
			handleChange(e) {
				if(e.length >= 2) {
					this.date = [
						e[0], e[e.length -1]
					]
					this.showCalendar = false
					this.list = []
					this.pageNo = 0;
					this.pageSize = 20;
					this.getTradeListCount();
					this.getTradeList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.example-body {
		background-color: #fff;
	}
	
	.body {
		padding-bottom: 60rpx;
	}
	
	/deep/ .uni-list-item__content-note {
		color: #ff5500;
	}
</style>